<template>
    <div class="main-content">
        <echartsLayout :formState='formState' :dataListState='dataListState' :eCharts1State='eCharts1State' :eCharts2State='eCharts2State' 
        :eCharts3State='eCharts3State' :chartsListState='chartsListState' :tableState='tableState'>
            <div slot="form">
                <el-form :model="query" ref="query" :rules="rules" label-width="80px" label-position="right">
                    <el-row :gutter="41">
                        <el-col :span="7">
                            <el-form-item label="学校" prop="schoolName">
                                <school v-model="query.schoolName" style="width:100%" @change='getSchoolId'></school>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="e学云ID号" prop="eID">
                                <el-input v-model="query.eID" placeholder="请输入e学云ID号" style="width:100%" :maxlength="9"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="姓名" prop="teacherName">
                                <el-input v-model="query.teacherName" placeholder="请输入" style="width:100%"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row> 
                    <el-row :gutter="41">
                        <el-col :span="7">
                            <el-form-item label="月份">
                                 <el-date-picker
                                    v-model="query.giveTimeStart"
                                    style="width:100%"
                                    :picker-options="query.pickerOptions1" 
                                    :clearable="false" 
                                    :editable="false" 
                                    type="month"
                                    placeholder="选择月份">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="3" :offset="14">
                            <div class="top-line">
                                <el-button type="primary" class="btn-common" @click="onSubmit('query')">查询</el-button>
                            </div>
                        </el-col>
                    </el-row> 
                </el-form>
            </div> 
            <div slot="table" >
                <div class="table-title">
                    <exportExcel @ee="exportFile"></exportExcel>
                </div> 
                <el-table :data="tableData" border v-loading="loading" style="width: 100%"  @sort-change='sortChange'>
                    <el-table-column label="e学云ID号" align="center">
                        <template scope="scope">
                            <span>{{scope.row.exueCode}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="教师姓名" align="center">
                        <template scope="scope">
                            <span>{{scope.row.userName}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="登录次数" align="center" sortable='custom' prop="loginNumber">
                        <template scope="scope">
                            <span>{{scope.row.loginNumber}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="发布动态数" align="center" sortable='custom' prop="continuousActivityNumber">
                        <template scope="scope">
                            <span>{{scope.row.continuousActivityNumber}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="布置作业数" align="center" sortable='custom' prop="thisWeekComeBackNumber">
                        <template scope="scope">
                            <span>{{scope.row.thisWeekComeBackNumber}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="发布通知数" align="center" sortable='custom' prop="uninstallUserNumber">
                        <template scope="scope">
                            <span>{{scope.row.uninstallUserNumber}}</span>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination-container">
                    <el-pagination
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="pageQuery.total"
                        :current-page.sync="pageQuery.currentpage"
                        :page-sizes="config.pageSizes"
                        :page-size="config.pageSize"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange">
                    </el-pagination>
                </div>
            </div>
        </echartsLayout>
    </div>
</template>

<script>
    import moment from 'moment';
    import echartsLayout from 'components/TableLayout/echartsLayout'; 
    import exportExcel from 'components/ExportExcel';  
    import school from 'components/SchoolClasss/school';
    import { pageTeacherActiveAnalysis } from 'api/pingtaifenxi';
    import { mapState, mapActions } from 'vuex';
    import validate from '@/utils/validate';
    export default{
        name: 'teacherActive',
        components: {echartsLayout, exportExcel, school},
        data() {
            var eID = (rule, value, callback) => {
                if (value) {
                    if (this.query.schoolName === '') {
                        callback(new Error('请先输入学校'));
                    } else {
                        callback();
                    }
                } else {
                    callback();
                }
            };
            var teacherName = (rule, value, callback) => {
                if (value) {
                    if (this.query.schoolName === '') {
                        callback(new Error('请先输入学校'));
                    } else {
                        callback();
                    }
                } else {
                    callback();
                }
            };
            return {
                loading: false,
                formState: false,
                dataListState: true,
                eCharts1State: true,
                eCharts2State: true,
                eCharts3State: true,
                chartsListState: true,
                tableState: false,
                schoolList: [],
                query: {
                    schoolName: '',
                    schoolId: '',
                    eID: '',
                    teacherName: '',
                    minDay: '',
                    giveTimeStart: moment(new Date()).format('YYYY-MM'),
                    pickerOptions1: {
                        disabledDate(time) {
                            return (time.getTime()) > (Date.now());
                        }
                    }
                },
                tableData: [],
                loginNumberStatus: '1',
                continuousActivityNumberStatus: '',
                thisWeekComeBackNumberStatus: '',
                uninstallUserNumberStatus: '',
                pageQuery: {
                    currentpage: 1,
                    total: 0
                },
                pickerOptions1: null,
                pickerOptions2: null,
                jsonStr: null,
                rules: {
                    eID: [
                       { pattern: /^\d{5,10}$/, trigger: 'blur', message: '请输入完整的e学云ID号'},
                         { validator: eID, trigger: 'blur' }
                    ],
                    minDay: [
                        { pattern: /^\d+$/, trigger: 'blur', message: '请输入数字'}
                    ],
                    teacherName: [
                        { validator: teacherName, trigger: 'blur' }
                    ]
                } 
            }
        },
        computed: {
            ...mapState({
                config: state => state.config.table
            })
        },
        created() {
            this.queryData();
        },
        methods: {
            ...mapActions(['ChangePageSize']),
            handleSizeChange(val) {
                this.pageQuery.currentpage = 1;
                this.ChangePageSize(val);
                this.queryData();
            },
            handleCurrentChange(val) {
                this.pageQuery.currentpage = val;
                this.queryData();
            },
            queryData() {
                let page= this.pageQuery.currentpage,
                    rows=this.config.pageSize,
                    date=moment(this.query.giveTimeStart).format('YYYY-MM'),
                    schoolId=this.query.schoolId,
                    exueCode=this.query.eID,
                    userName=this.query.teacherName,
                    loginNumber=this.query.minDay, // 登录次数
                    loginNumberStatus=this.loginNumberStatus, // 登录次数排序 0.升序 1.降序”,
                    continuousActivityNumberStatus=this.continuousActivityNumberStatus, // 发布动态数排序0.升序 1.降序”,
                    thisWeekComeBackNumberStatus=this.thisWeekComeBackNumberStatus, // 布置作业数排序 0.升序 1.降序”,
                    uninstallUserNumberStatus=this.uninstallUserNumberStatus;// “发
                pageTeacherActiveAnalysis(
                    page, rows, date, schoolId, exueCode, userName, 
                    loginNumber, loginNumberStatus, continuousActivityNumberStatus,
                    thisWeekComeBackNumberStatus, uninstallUserNumberStatus)
                    .then(res => {
                        this.loading = false;
                        this.tableData = res.data.content.list;
                        this.pageQuery.total = res.data.content.pagination?res.data.content.pagination.total:0;
                    }).catch(() => {
                        this.loading = false;
                    })
            },
            exportFile() {
                let date=moment(this.query.giveTimeStart).format('YYYY-MM'),
                    schoolId=this.query.schoolId,
                    exueCode=this.query.eID,
                    userName=this.query.teacherName,
                    loginNumber=this.query.minDay, // 登录次数
                    loginNumberStatus=this.loginNumberStatus, // 登录次数排序 0.升序 1.降序”,
                    continuousActivityNumberStatus=this.continuousActivityNumberStatus, // 发布动态数排序0.升序 1.降序”,
                    thisWeekComeBackNumberStatus=this.thisWeekComeBackNumberStatus, // 布置作业数排序 0.升序 1.降序”,
                    uninstallUserNumberStatus=this.uninstallUserNumberStatus;// “发
                window.location.href = `${LOCAL_API.scy}/report/outExcelTeacherActiveAnalysis?date=${date}&schoolId=${schoolId}&exueCode=${exueCode}&userName=${userName}&loginNumber=${loginNumber}&loginNumberStatus=${loginNumberStatus}&continuousActivityNumberStatus=${continuousActivityNumberStatus}
                &thisWeekComeBackNumberStatus=${thisWeekComeBackNumberStatus}
                &uninstallUserNumberStatus=${uninstallUserNumberStatus}`.trim()
            },
            onSubmit(query) {
                this.$refs[query].validate((valid) => {
                    if (valid) {
                        this.pageQuery.currentpage = 1;
                        this.queryData();
                    }
                })
            },
            sortChange({ column, prop, order }) {
                this.loginNumberStatus=prop=='loginNumber'?order=='ascending'?'0':'1':'';
                this.continuousActivityNumberStatus =prop=='continuousActivityNumber'?order=='ascending'?'0':'1':'';
                this.thisWeekComeBackNumberStatus =prop=='thisWeekComeBackNumber'?order=='ascending'?'0':'1':'';
                this.uninstallUserNumberStatus =prop=='uninstallUserNumber'?order=='ascending'?'0':'1':'';
                this.pageQuery.currentpage = 1;
                this.queryData();
            },
           
            getSchoolId(schoolId) {
                this.query.schoolId = schoolId;
            }
        }
    }
</script>
<style lang="scss" scoped>
    .main-content {
        position: relative;
        $bgcolor: #fff;
    }
</style>          

           